import { Button, Form, Input, Modal, Select, Table, TimePicker } from 'antd'
import dayjs from 'dayjs';
const { Option } = Select;
import {
  PlusOutlined, EditOutlined
} from '@ant-design/icons'
import React, { useEffect, useState } from 'react'
import { getTimes, createdTimes } from '../../../api/base/timeSlot'


const Timer: React.FC = () => {
  const [dataSource, setSource] = useState<any[]>([])
  const [initialValues, setInitialValues] = useState()
  const [form] = Form.useForm();
  const [form1] = Form.useForm();
  const [open, setOpen] = useState<boolean>()

  const getTimesList = async (params?: object) => {
    const res = await getTimes(params).catch(err => {
      console.log(err)
    }) as any
    if (res.success) {
      setSource(res.data)
    }
  }
  useEffect(() => {
    if (!dataSource.length) {
      getTimesList()
    }
  }, [])


  const columns = [
    {
      title: '开始时间',
      dataIndex: 'start_date',
      key: 'start_date',
    },
    {
      title: '结束时间',
      dataIndex: 'end_date',
      key: 'end_date',
    },
    {
      title: '周',
      dataIndex: 'day_of_week',
      key: 'day_of_week',
    },
    {
      title: '操作',
      key: 'option',
      render: (_: any, record: any) => (
        <>
          <Button type="primary" icon={<EditOutlined />} onClick={() => edit(record)}>编辑</Button>
        </>
      ),
    },
  ];



  const onSearch = () => {
    getTimesList(form.getFieldsValue())
  }

  const edit = (record: any) => {
    form1.setFieldsValue(record)
    setInitialValues(record)
    console.log(initialValues, form1.getFieldsValue())
    setOpen(true)
  }

  const addTime = () => {
    setOpen(true)
  }

  const handlOk = async (fieldsValue: any) => {
    const values = {
      ...fieldsValue,
      'start_date': fieldsValue['start_date'].format('HH:mm:ss'),
      'end_date': fieldsValue['end_date'].format('HH:mm:ss'),
    };
    const res = await createdTimes(values).catch(err => {
      console.log(err)
    })
    console.log(res)
  }
  return (
    <>
      <div style={{ marginBottom: '10px' }}>
        <Form form={form} name="horizontal_login" layout="inline" onFinish={onSearch} >
          <Form.Item name="day_of_week" label="周">
            <Select placeholder="选择" allowClear>
              {
                ['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map(item => {
                  return <Option value={item}>{item}</Option>
                })
              }
            </Select>
          </Form.Item>

          <Form.Item>
            <Button type="primary"  >
              搜索
            </Button>
          </Form.Item>

        </Form>
      </div>
      <Button type="primary" icon={<PlusOutlined />} onClick={addTime}>添加</Button>
      <Table dataSource={dataSource} columns={columns} rowKey="timeSlot_id" />

      <Modal open={open} footer={null} onCancel={() => setOpen(false)}>
        <Form form={form1} onFinish={handlOk} initialValues={initialValues}>
          <Form.Item label="开始时间" name='start_date'>
            <TimePicker />
          </Form.Item>
          <Form.Item label="结束时间" name='end_date'>
            <TimePicker />
          </Form.Item>
          <Form.Item name="day_of_week" label="周">
            <Select placeholder="选择" allowClear>
              {
                ['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map((item, index) => {
                  return <Option value={item} key={index}>{item}</Option>
                })
              }
            </Select>
          </Form.Item>

          <Form.Item >
            <Button type="primary" htmlType="submit">
              确认
            </Button>
            <Button onClick={() => setOpen(false)}>
              取消
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </ >
  )
}

export default Timer